<template>
  <div>
    <!-- 添加角色表单 -->
    <el-form :inline="true" :model="addRoleData" class="demo-form-inline">
      <el-form-item label="角色名称" prop='name'>
        <el-input v-model.trim="addRoleData.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="描述信息" prop="desc">
        <el-input v-model.trim="addRoleData.desc" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addRole('ruleFormRef')">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格列表 -->
    <el-table :data="roleList" border style="width: 100%">
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="desc" label="说明" />
      <el-table-column label="操作">
        <template #default='scope'>
          <el-button type="primary" size="small" @click="changeRole(scope.row)">修改</el-button>
          <el-button type="primary" size="small" @click="accredit(scope.row)">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="修改信息">
      <el-form :inline="true" :model="roleData" class="demo-form-inline">
        <el-form-item prop='name'>
          <div>角色名称:</div>
          <el-input v-model.trim="roleData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="desc">
          <div>描述信息:</div>
          <el-input v-model.trim="roleData.desc" placeholder="请输入" />
        </el-form-item>
        <el-form-item style="margin-top:30px">
          <el-button type="primary" @click="revamp()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 授权弹出框 -->
    <el-dialog v-model="dialogVisible" title="权限配置">
      <div class="custom-tree-container">
        <el-tree :data="dataSource.systemPermissions" ref="tree" show-checkbox node-key="id" :expand-on-click-node="false" :default-checked-keys="dataSource.assignedPermissions">
          <template #default="{ node,data}">
            <span class="custom-tree-node">{{node.label}}</span>
            <span v-if="data.id.length>8">{{data.id}}</span>
          </template>
        </el-tree>
        <div class="dialog-footer">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="optConfirm">确定</el-button>
        </div>
      </div>

    </el-dialog>
    <!-- 分页组件 -->
    <Paging v-bind="pageData" @pageChang='pageChang'></Paging>
  </div>
</template>
<script>
import { post } from "@/utils/http";
import Paging from "@/components/Paging/Paging.vue";
import { debounce } from "@/utils/debounce";
export default {
  data() {
    return {
      addRoleData: {  //添加角色数据
        name: '',
        desc: '',
      },
      roleData: {  //添加角色数据
        name: '',
        desc: '',
        id: 0,  //id
      },
      roleList: [],  //角色列表数据
      pageData: {  //分页数据
        total: 0, //总条数
        currentPage: 1,  //页数
        pageSize: 10  //每页条数
      },
      dialogFormVisible: false,  //弹出修改框显示
      dialogVisible: false,  //树形控件弹出框显示
      dataSource: [],  //树形控件数据
      roleId: 0  //角色id
    }
  },
  components: {
    Paging
  },
  methods: {
    // 添加角色
    addRole: debounce(function () {
      if (this.addRoleData.name !== '') {
        post({ _gp: 'admin.role', _mt: 'create' }, { role: this.addRoleData }).then(res => {
          if (200 == res.errno) {
            ElMessage.success('成功')
            this.addRoleData = {}
            this.initData()
          } else {
            ElMessage.error(res.errmsg)
          }
        })
      } else {
        ElMessage.warning('角色名称不能为空')
      }
    }, 500),
    // 授权按钮
    accredit(row) {
      this.roleId = row.id
      this.dialogVisible = true
      post({ _gp: 'admin.role', _mt: 'permissionList', roleId: row.id }).then(res => {
        if (200 == res.errno) {
          this.$refs.tree.setCheckedKeys([])  //清空操作
          this.dataSource = res.data
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    },
    // 选中授权确定
    optConfirm() {
      let selectCheked = this.$refs.tree.getCheckedKeys()
      let data = { roleId: this.roleId, permissions: selectCheked }
      post({ _gp: 'admin.role', _mt: 'permissionSet', roleSetPermissionDTO: JSON.stringify(data) }).then(res => {
        this.dialogVisible = false
        ElMessage.success('成功')
        this.initData()
      })
    },
    // 修改角色
    changeRole(row) {
      this.roleData.id = row.id
      this.dialogFormVisible = true
      this.roleData.name = row.name
      this.roleData.desc = row.desc
    },
    //修改确认
    revamp() {
      if (this.roleData.name != '') {
        post({ _gp: "admin.role", _mt: 'update', role: JSON.stringify(this.roleData) }).then(res => {
          if (200 == res.errno) {
            this.dialogFormVisible = false
            ElMessage.success('成功')
            this.initData()
          }
        })
      } else {
        ElMessage.warning('角色名称不能为空')
      }
    },
    // 初始化数据
    initData() {
      let data = { _gp: 'admin.role', _mt: 'list', page: this.pageData.currentPage, limit: this.pageData.pageSize }
      post(data).then(res => {
        if (200 == res.errno) {
          this.pageData.total = res.data.total //赋值总条数
          this.roleList = res.data.items
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    },
    // 分页
    pageChang(e) {
      Object.assign(this.pageData, e)  //解构并赋值
      this.initData()
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  width: 100%;
  text-align: right;
  height: 50px;
  padding-top: 50px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>